<template>
  <div class="new-card">
    <!-- 颜色模块 -->
    <div class="colors" v-show="id == 0">
      <p
        class="color-list"
        v-for="(item, index) in cardColor1"
        :key="index"
        :style="{ background: item }"
        :class="{ colorselected: index === colorSelected }"
        @click="changeColor(index)"
      ></p>
    </div>

    <!-- 照片 -->
    <div class="add-photo" v-if="id == 1">
      <input
        type="file"
        name="file"
        id="file"
        multiple="multiple"
        @change="showPhoto"
      />
      <div class="add-bt" v-if="url == ''">
        <svg-icon icon="add"></svg-icon>
      </div>
      <div class="change-bt" v-if="url != ''">
        <svg-icon icon="update"></svg-icon>
      </div>
      <diiv class="photo-div"><img :src="url" /></diiv>
    </div>

    <!-- 留言输入框部分  卡片 -->
    <div
      class="card-main"
      :style="{ background: id == 0 ? cardColor[colorSelected] : cardColor[5] }"
    >
      <textarea
        placeholder="留言..."
        class="message"
        maxlength="96"
        v-model="message"
      ></textarea>
      <input type="text" placeholder="签名" class="name" v-model="name" />
    </div>
    <!-- 选择标签模块 -->
    <div class="labels">
      <div class="title">选择标签</div>
      <div class="label">
        <div
          class="label-list"
          v-for="(item, index) in label[id]"
          :key="index"
          :class="{ labelselected: index === labelSelected }"
          @click="changeLabel(index)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <!-- 免责声明模块 -->
    <div class="disclaimers">
      <p class="title">免责声明</p>
      <p class="message">
        该留言墙是本人独自开发的，为便于与用户交流的留言平台。请不要利用此平台服务制作、上传、下载、复制、发布、传播或者转载如下内容：<br />
        1、反对宪法所确定的基本原则的；<br />
        2、危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家 统一的；<br />
        3、损害国家荣誉和利益的；
        <br />4、煽动民族仇恨、民族歧视，破坏民族团结的；<br />
        5、破坏国家宗教政策，宣扬邪教和封建迷信的；<br />
        6、散布谣言，扰乱社会秩序，破坏社会稳定的；<br />
        7、散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；<br />
        8、侮辱或者诽谤他人，侵害他人合法权益的；<br />
        9、含有法律、行政法规禁止的其他内容的信息。
      </p>
    </div>

    <!-- 按钮模块 -->
    <div class="footerbtn">
      <button-vue size="max" state="secondary" @click="closeModal(0)"
        >取消</button-vue
      >
      <button-vue size="max" class="submit" @click="submitWall"
        >确定</button-vue
      >
    </div>
  </div>
</template>

<script setup>
import { cardColor, cardColor1, label } from "@/utils/data";
import { getObjectURL } from "@/utils/tools";
import { ref } from "vue";
import ButtonVue from "@/components/Button.vue";
// import axios from 'axios';
import { useStore } from "vuex";
import { insertWallApi } from "@/api/index";
import { getCurrentInstance } from "@vue/runtime-core";

const _this = getCurrentInstance();
const { $message } = _this.appContext.config.globalProperties;
const store = useStore();

const colorSelected = ref(0); // 当前选中颜色
const labelSelected = ref(0); // 当前选中标签
const message = ref(""); // 留言信息
let name = ref(""); // 签名

const user = ref(store.state.user);
const url = ref("");
// 改变颜色选中状态的方法
const changeColor = (e) => {
  colorSelected.value = e;
};
// 改变标签是否选中
const changeLabel = (e) => {
  labelSelected.value = e;
};
// 拿到是留言墙还是照片墙 才能渲染选择标签 从wallmessage中传过来
const props = defineProps({
  id: {
    default: 0,
  },
});

// 关闭窗口
const emit = defineEmits(["cancel", "clickBtn"]);
const closeModal = (data) => {
  emit("cancel", data);
};

// 提交新建wall
const submitWall = () => {
  let newName = ref("匿名");
  if (name.value) {
    newName.value = name.value;
  }

  let data = {
    type: props.id,
    message: message.value,
    name: newName.value,
    userId: user.value.id,
    moment: new Date(),
    label: labelSelected.value,
    color: 5,
    imgurl: "",
  };
  // console.log(data)
  if (message.value && props.id == 0) {
    data.color = colorSelected.value;
    insertWallApi(data).then((res) => {
      // console.log("res", res);
      let cardD = {
        type: props.id,
        message: message.value,
        name: newName.value,
        userId: user.value.id,
        moment: new Date(),
        label: labelSelected.value,
        color: colorSelected.value,
        imgurl: "",
        id: res.message.insertId,
        islike: [{ count: 0 }],
        like: [{ count: 0 }],
        comcount: [{ count: 0 }],
        report: [{ count: 0 }],
        revoke: [{ count: 0 }],
      };
      emit("clickBtn", cardD);
      message.value = "";

      // this.$message({ type: 'success', message: '感谢你的记录！' }) 消息提醒
      $message({ message: "感谢你的记录！", type: "success" }); // 此处不显示图标 测试时图标是正常显示 可能传递参数代码有问题？
    });
  }
};

// 接口测试使用
// const apiTest = () => {
//     let data = {
//         type: 0,
//         message: "测试留言",
//         name: "zs",
//         userId: 222,
//         moment: new Date(),
//         label: 1,
//         color: 3,
//         imgurl: "xxxxx"
//     }
//     axios.post('http://localhost:3000/insertwall', data)
//         .then((res) => {
//             console.log(res)
//         })
// }

// 图片显示
const showPhoto = () => {
  let aa = getObjectURL(document.getElementById("file").files[0]);
  url.value = aa;
};
</script>

<style lang="less" scoped>
.new-card {
  padding: 0 @padding-20;
  position: relative;

  .colors {
    display: flex;
    align-items: center;

    .color-list {
      width: 24px;
      height: 24px;
      margin-right: @padding-8;
      cursor: pointer;
    }

    // 被选中的有边框
    .colorselected {
      border: 1px solid @primary-color;
    }
  }

  // 留言输入框部分
  .card-main {
    box-sizing: border-box;
    padding: @padding-12;
    margin-top: @padding-12;
    width: 320px;
    height: 240px;
    // background: rgba(252, 175, 162, 0.31);
    transition: @tr;

    // textarea样式
    .message {
      padding: @padding-8;
      box-sizing: border-box;
      background: none;
      border: none;
      resize: none;
      height: 172px;
      width: 100%;
      font-family: fa;
      font-size: 15px;
    }

    .name {
      width: 100%;
      box-sizing: border-box;
      padding: @padding-8;
      background: none;
      border: 1px solid @gray-10;
      line-height: 20px;
      font-family: fa;
      font-size: 15px;
    }
  }

  .title {
    color: @gray-0;
    font-weight: 600;
    padding-top: 30px;
  }

  // 选择标签模块
  .label {
    display: flex;
    flex-wrap: wrap;
    width: 320px;

    .label-list {
      padding: 2px 10px;
      border-radius: 20px;
      margin: 16px @padding-4 0 0;
      cursor: pointer;
      color: @gray-2;
      transition: @tr;
    }

    // 选中状态
    .labelselected {
      background: #ebebeb;
      font-weight: 600;
      color: @gray-0;
    }
  }

  // 免责声明
  .disclaimers {
    .message {
      padding-top: 10px;
      font-size: 12px;
      color: @gray-2;
    }
  }

  // 按钮
  .footerbtn {
    padding: @padding-20;
    box-sizing: border-box;
    position: fixed;
    bottom: 52px;
    left: 0;
    background: rgba(255, 255, 255, 0.6);
    width: 100%;
    backdrop-filter: blur(10px);

    .submit {
      margin-left: @padding-20;
      width: 200px;
    }
  }

  .add-photo {
    padding-bottom: 20px;
    position: relative;

    #file {
      position: absolute;
      z-index: 10;
      top: -10px;
      height: 74px;
      width: 64px;
      opacity: 0;
      cursor: pointer;
    }

    .add-bt {
      width: 64px;
      height: 64px;
      border: 1px solid @gray-2;
      border-radius: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      .svg-icon {
        font-size: 24px;
      }
    }

    .photo-div {
      max-height: 200px;
      width: 100%;
      background: #f0f0f0;
      overflow: hidden;
      display: flex;
      align-items: center;

      img {
        width: 100%;
      }
    }

    .change-bt {
      position: absolute;
      top: 12px;
      left: 12px;
      height: 40px;
      width: 40px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;

      .svg-icon {
        color: @gray-10;
      }
    }
  }
}
</style>
